<template>
  <div class="app-container">
    <div id="MapBox">
      <baidu-map class="baiduMap" :center="center" :zoom="zoom" @ready="handler">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!-- <bm-point-collection :points="points"  shape="BMAP_POINT_SHAPE_WATERDROP"  @click="clickHandler"></bm-point-collection> -->
        <!-- <div v-for="(item,index) in points" :key="index"> -->
        <div v-for="(item,index) in points" :key="index">
          <bm-marker :position="item.position" :dragging="true" @click="clickHandler(item)">
            <!-- <bm-label :content="item.company" :labelStyle="{color: 'blue', fontSize : '14px',border:'none',display:'none'}"
              :offset="{width: -20, height: 0}" /> -->

            <!-- <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{item.company}} -->
            </bm-info-window>
          </bm-marker>

        </div>
        <!-- </div> -->

        <div class="search-box">
          <el-input v-model="listQuery.item.company" style="width: 190px;margin-left: 10px;" placeholder="请输入单位名称/测点MAC">
          </el-input>
          <i class="el-icon-search search" @click="searchList"> </i>
          <!-- <i class="el-icon-arrow-up search"></i> -->
          <i v-if="isOpen" class=" el-icon-arrow-up  search" @click="openSearchList"></i>
          <i v-else class=" el-icon-arrow-down  search" @click="openSearchList"></i>
        </div>
        <div class="search-list-box" v-if="isOpen">
          <div
            style="display: inline-flex; flex-direction: row; align-items: center;padding-bottom: 10px; border-bottom: solid 2px #eeeeee;">
            <i style="font-size: 80%;">搜索结果:[测点MAC]单位名称</i>
            <el-checkbox v-model="checked" style="padding-left: 10px;"> <i
                style="font-size: 80%;margin-left: -5px;">仅看已连接</i></el-checkbox>
          </div>
          <div v-if="checked">
            <div v-for="(item,index) in mList" :key="index" @click="onItemClick(item)" class="map-bar"
              v-if="item.state === 0">
              <i class="el-icon-monitor"></i>
              <span
                style="margin-left: 5px; width: 18em; font-size: 14px; color: #303133; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                :title="'['+item.deviceMac+']'+ item.company">{{'['+item.deviceMac+']'+ item.company}}</span>
            </div>
          </div>
          <div v-else v-for="(item,index) in mList" :key="index" @click="onItemClick(item)" class="map-bar">
            <i class="el-icon-monitor" v-if="item.state === 0" style="color: #303133;"></i>
            <i class="el-icon-monitor" v-else style="color: #999999;"></i>
            <span v-if="item.state === 0"
              style="margin-left: 5px; width: 18em; font-size: 14px; color: #303133; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
              :title="'['+item.deviceMac+']'+ item.company">{{'['+item.deviceMac+']'+ item.company}}</span>
            <span v-else
              style="margin-left: 5px; width: 18em; font-size: 14px; color: #999999; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
              :title="'['+item.deviceMac+']'+ item.company">{{'['+item.deviceMac+']'+ item.company}}</span>
          </div>
          <div class="block"
            style="width:100%; position: absolute; bottom: 0; left: 0; background-color: #ffffff; justify-content: center; align-items: center;">
            <span class="demonstration" style="background-color: #ffffff;"></span>
            <el-pagination small layout="prev, pager, next" style="text-align: center;" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :total="listQuery.page.total" :current-page="listQuery.page.num"
              :page-size="listQuery.page.size">
            </el-pagination>
          </div>
        </div>
        <!-- 右侧弹框 -->

        <div class="details" v-if="isShowDetailsDialog">
          <div class="details-header">
            <div
              style="display:inline-flex; justify-content: space-between; height: 50px; line-height: 50px; align-items: center; padding-left: 15px; padding-right: 20px; width: 100%;">
              <label class="label-box" v-if="selectItem.state === 0"> 测点MAC:{{selectItem.deviceMac}}[在线]</label>
              <label class="label-box" v-else>测点MAC:{{selectItem.deviceMac}}[离线]</label>
              <i class="el-icon-close" style="color: #FFFFFF;" @click="closeDetailsDialog"></i>
            </div>
            <div
              style="display:inline-flex; justify-content: space-between; height: 30px; line-height: 30px; align-items: center; padding-left: 15px; padding-right: 20px; width: 100%; padding-bottom: 10px;">
              <label style="font-size: 14px; color: #FFFFFF;">{{selectItem.company}}</label>
              <label style="font-size: 14px; color: #FFFFFF;">{{deviceInfo.syncTime}}</label>
            </div>

          </div>

          <!-- 设备数据 -->
          <div v-if="deviceInfo">
          <div :class="deviceInfo.data16 == 3 || deviceInfo.data16 == 4 ? 'details-device-info2': 'details-device-info'" >
            <div class="mdiv-box">
              <label class="label-box-font border-box">浓度值（mg/m³）</label>
              <div class="border-box" v-if="deviceInfo.data16 == 1 || data16 == 2">
                <label class="label-box-font marage-left-5">油烟：{{deviceInfo.data1}}</label>
                <label class="label-box-font marage-left-5">颗粒物：{{deviceInfo.data2}}</label>
                <label class="label-box-font marage-left-5">NMHC：{{deviceInfo.data3}}</label>
                <label class="label-box-font margin-left-10">温度：{{deviceInfo.data7}}℃</label>
                <label class="label-box-font margin-left-10">湿度：{{deviceInfo.data8}}%</label>
              </div>
              <div  v-else-if="deviceInfo.data16 == 3 ||  deviceInfo.data16 == 4">
                <label class="label-box-font marage-left-5">油烟：{{deviceInfo.data1}}</label>
                <label class="label-box-font marage-left-5">颗粒物：{{deviceInfo.data2}}</label>
                <label class="label-box-font marage-left-5">NMHC：{{deviceInfo.data3}}</label>
              </div>
            </div>
          
            <div class="mdiv-box border-box" v-if="deviceInfo.data16 == 3 ||  deviceInfo.data16 == 4">
              <label class="label-box-font border-box" style="width: 120px;">烟道参数</label>
              <div class="border-box" style="flex-direction: column; display: inline-flex;">
                <div>
                  <label class="label-box-font marage-left-10">采样流量：{{deviceInfo.data7}}L/min</label>
                  <label class="label-box-font marage-left-10">大气压强：{{deviceInfo.data8}}kPa</label>
                  <label class="label-box-font marage-left-10">烟气动压：{{deviceInfo.data9}}Pa</label>
                </div>
                <div class="marage-top-5">
                  <label class="label-box-font marage-left-10 marage-top-5">烟气静压：{{deviceInfo.data10}}kPa</label>
                  <label class="label-box-font marage-left-10 marage-top-5">烟气流速：{{deviceInfo.data11}}m/s</label>
                  <label class="label-box-font marage-left-10 ">风量：{{deviceInfo.data12}}L/min</label>
                </div>
              <div class="marage-top-5">
                <label class="label-box-font marage-left-10 marage-top-5" v-if = "deviceInfo.data16 == 3">加热温度：{{deviceInfo.data13}}℃</label>
              <label class="label-box-font marage-left-10 marage-top-5" v-if = "deviceInfo.data16 == 3">含湿量：{{deviceInfo.data14}}%</label>
              <label class="label-box-font marage-left-10 marage-top-5" v-if = "deviceInfo.data16 == 3">稀释流量：{{deviceInfo.data15}}L/min</label>
              </div>
         </div>
          </div>
            <div v-if="deviceInfo.data16 == 1 || data16 == 2">
              <div class="mdiv-box" >
                <label v-if="deviceInfo.data9 === '1'" class="label-box-font border-box">排风机（运行中）</label>
                <label v-else class="label-box-font  border-box">排风机（未运行）</label>
                <label class="label-box-font border-box">电流：{{deviceInfo.data11}}A</label>
              </div>
              <div class="mdiv-box">
                <label v-if="deviceInfo.data10 === '1'" class="label-box-font border-box">净化器（运行中）</label>
                <label v-else class="label-box-font border-box">净化器（未运行）</label>
                <div class="border-box">
                  <label class="label-box-font marage-left-5">电压：{{deviceInfo.dcdy}}V</label>
                  <label class="label-box-font marage-left-5">电流：{{deviceInfo.data12}}A</label>
                  <label v-if="deviceInfo.data13*1 > 200" class="label-box-font marage-left-5"
                    style="color: red;">压差：{{deviceInfo.data13}}Pa</label>
                  <label v-else class="label-box-font marage-left-5">压差：{{deviceInfo.data13}}Pa</label>
                </div>
              </div>
            </div>
            <div v-else-if="deviceInfo.data16 == 3 && dcList.length > 0">
              <div class="mdiv-box" >
                <label v-if="dcList[0].data7 === '1'" class="label-box-font border-box">排风机（运行中）</label>
                <label v-else class="label-box-font  border-box">排风机（未运行）</label>
                <label v-if="dcList[0].data8 === '1'" class="label-box-font border-box">净化器（运行中）</label>
                <label v-else class="label-box-font border-box">净化器（未运行）</label>
              </div>
            </div>
            <div v-else-if="deviceInfo.data16 == 4">
              <div class="mdiv-box" >
                <label v-if="deviceInfo.data4 === '1'" class="label-box-font border-box">排风机（运行中）</label>
                <label v-else class="label-box-font  border-box">排风机（未运行）</label>
                <label v-if="deviceInfo.data5 === '1'" class="label-box-font border-box">净化器（运行中）</label>
                <label v-else class="label-box-font border-box">净化器（未运行）</label>
              </div>
            </div>
          </div>
          </div>
              <!-- Table 以及列表 -->
          <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 15px; margin-bottom: 0px;">
            <el-tab-pane label="测点信息" name="first" class="r-info clearfix">
              <div class="r-info-mod">
                <label class="label-box-font border-box">测点MAC：{{deviceInfo.deviceMac}}</label>
                <label class="label-box-font  border-box">测点名称：{{deviceName}}</label>
                <label class="label-box-font  border-box">所属单位：{{selectItem.company}}</label>
                <label class="label-box-font  border-box">所属区域：{{selectItem.adminstrative}}</label>
                <label class="label-box-font  border-box">单位地址：{{selectItem.address}}</label>
                <!-- <label class="label-box-font  border-box">服务商：{{}}</label> -->
              </div>
              <div class="r-info-mod">
                <label class="label-box-font  border-box">联系人员：{{selectItem.username}}</label>
                <label class="label-box-font  border-box">默认手机：{{selectItem.telephone}}</label>
                <label class="label-box-font  border-box">信用代码：{{selectItem.creditCode}}</label>
                <label class="label-box-font  border-box">排污许可：{{selectItem.dischargePermit}}</label>
                <!-- <label class="label-box-font  border-box">标准灶头：{{}}个</label>
            <label class="label-box-font  border-box">设计风量：{{}}立方米/秒</label>
            <label class="label-box-font  border-box">技术路线：{{}}</label> -->
                <!-- <label class="label-box-font  border-box">扫码检测：微信扫码查看测点状态</label> -->
                <!-- 二维码  单位档案、测点档案 -->
              </div>
            </el-tab-pane>
            <el-tab-pane label="电场" name="second" style="background-color: #FFFFFF;">

              <div v-if="dcList.length > 0 ">
              <el-table v-if="deviceInfo.data16 == 1 " :data="dcList" stripe style="width: 100%">
                <el-table-column type="index" label="#" width="30">
                </el-table-column>
                <el-table-column prop="data1" label="电场" width="60">
                </el-table-column>
                <el-table-column label="一次电压" width="80">
                  <template slot-scope="scope">
                    <span> {{deviceInfo.dcdy}}V</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次电压" width="80">
                  <template slot-scope="scope">
                    <span v-if=" scope.row.data2 !='x' && scope.row.data2 !='' && (scope.row.data2 *1) <= 9"
                      style="color: red;">{{scope.row.data2}}kV</span>
                    <span v-else>{{scope.row.data2}}kV</span>
                  </template>
                  
                </el-table-column>
                <el-table-column label="二次电流" width="80">
                  <template slot-scope="scope">
                    <span>{{scope.row.data3}}mA</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次功率" width="80">
                  <template slot-scope="scope">
                    <span>{{scope.row.data4}}W</span>
                  </template>
                </el-table-column>
                <el-table-column label="保护" width="50" v-if="deviceInfo.data16 == 1 " >
                  <!-- <template slot-scope="scope" v-if="scope.row.data7 !=='' "> -->
                    <template slot-scope="scope" v-if="deviceInfo.data16 == 1 ">
                    <span class="svg-container red" v-if="scope.row.data7 === '0'">
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                    <span class="svg-container green" v-else>
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="开路" width="50" v-if="deviceInfo.data16 == 1 ">
                  <!-- <template slot-scope="scope" v-if="scope.row.data6 !=='' && scope.row.data7 !==''"> -->
                    <template slot-scope="scope" >
                    <span class="svg-container red" v-if="scope.row.data6 === '0'">
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                    <span class="svg-container green" v-else>
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="短路" width="50" v-if="deviceInfo.data16 == 1 ">
                  <template slot-scope="scope" v-if="deviceInfo.data16 == 1 ">
                  <!-- <template slot-scope="scope" v-if="scope.row.data8 !=='' "> -->
                    <span class="svg-container red" v-if="scope.row.data8 === '1'">
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                    <span class="svg-container green" v-else>
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="超温" width="50" v-if="deviceInfo.data16 == 1 ">
                  <template slot-scope="scope" v-if="deviceInfo.data16 == 1 ">
                  <!-- <template slot-scope="scope" v-if="scope.row.data9 !=='' "> -->
                    <span class="svg-container red" v-if="scope.row.data9 === '1'">
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                    <span class="svg-container green" v-else>
                      <svg-icon icon-class="my-dot"></svg-icon>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
              <el-table v-else-if="deviceInfo.data16 == 2" :data="dcList" stripe style="width: 100%" >
                <el-table-column type="index" label="#" width="30">
                </el-table-column>
                <el-table-column prop="data1" label="电场" width="80">
                </el-table-column>
                <el-table-column label="一次电压" width="100">
                  <template slot-scope="scope">
                    <span> {{deviceInfo.dcdy}}V</span>
                  </template>
                </el-table-column>
                <el-table-column label="一次电流" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.data3}}A</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次电压" width="100">
                  <template slot-scope="scope">
                    <span v-if=" scope.row.data5 !='x' && scope.row.data5 !='' && (scope.row.data5 *1) <= 9"
                      style="color: red;">{{scope.row.data5}}kV</span>
                    <span v-else>{{scope.row.data5}}kV</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次电流" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.data6}}mA</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次功率" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.data4}}W</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-table v-else-if="deviceInfo.data16 == 3 || deviceInfo.data16 == 4" :data="dcList" stripe style="width: 100%" >
                <el-table-column type="index" label="#" width="30">
                </el-table-column>
                <el-table-column prop="data1" label="电场" width="80">
                </el-table-column>
                <el-table-column label="一次电压" width="100">
                  <template slot-scope="scope">
                    <span> {{scope.row.data2}}V</span>
                  </template>
                </el-table-column>
                <el-table-column label="一次电流" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.data3}}A</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次电压" width="100">
                  <template slot-scope="scope">
                    <span v-if=" scope.row.data5 !='x' && scope.row.data5 !='' && (scope.row.data5 *1) <= 9"
                      style="color: red;">{{scope.row.data5}}kV</span>
                    <span v-else>{{scope.row.data5}}kV</span>
                  </template>
                </el-table-column>
                <el-table-column label="二次电流" width="100">
                  <template slot-scope="scope">
                    <span>{{scope.row.data6}}mA</span>
                  </template>
                </el-table-column>
              </el-table>
              
              <div v-if="dcList.length > 0" class="div-hint font-size-14">
                图例：
                <div class="font-size-14 margin-left-10">
                  <span class="svg-container red">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>
                  告警
                </div>
                <div class="font-size-14 margin-left-10">
                  <span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>
                  正常
                </div>
                <!-- <div class="font-size-14 margin-left-10">
                  <span class="svg-container gray">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>
                  异常
                </div> -->
              </div>
            </div>
              <div v-else class="label-box-font font-size-14" style="flex-direction: column; display: inline-flex;">
                <label class="label-box-font font-size-14">
                  未获取到电场信息.
                </label>
                <label class="label-box-font font-size-14">
                  原因之一：未录入电场设备信息
                </label>
                <label class="label-box-font font-size-14">
                  原因之二：未采集电场数据信息
                </label>
              </div>


            </el-tab-pane>
            <!-- <el-tab-pane label="告警" name="third" style="background-color: #FFFFFF;">告警</el-tab-pane> -->
            <el-tab-pane label="油烟" name="third" style="background-color: #FFFFFF;">
              <div id="yyCharts" :style="{width:'550px',height:'240px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="颗粒物" name="fourth" style="background-color: #FFFFFF;">
              <div id="klwCharts" :style="{width:'550px',height:'240px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="NMHC" name="fifth" style="background-color: #FFFFFF;">
              <div id="nmhcCharts" :style="{width:'550px',height:'240px'}"></div>
            </el-tab-pane>
            <!-- <el-tab-pane label="历史数据" name="sexth" style="background-color: #FFFFFF;">历史数据</el-tab-pane> -->
          </el-tabs>
          </div>

        

      </baidu-map>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { mapGetters } from 'vuex'
  import { getDetailsByDeviceMac } from '@/api/isp'
  import { getList, getDeviceDataMA } from '@/api/map'
  // import BMap from 'BMap'

  var _self

  export default {
    data() {
      return {
        deviceName: '',
        ycdy: '220',
        center: { lng: 0, lat: 0 },
        zoom: 3,
        show: false,
        map: undefined,
        overView: undefined,
        marker: undefined,
        BMap: undefined,
        points: [],
        activeName: 'first',
        checked: false, //是否在线
        searchContent: '', //搜索输入框内容
        isOpen: true, //显示隐藏列表
        userId: '', //登陆用户ID
        mList: '', //服务商设备列表
        selectItem: '', //选择的服务商设备对象。  默认第一条
        isShowDetailsDialog: true,
        dcList: [], //电源数据列表
        deviceInfo: '', //设备数据
        listQuery: {
          page: {
            num: 1,
            total: 0,
            size: 10
          },
          item: {
            name: '',
            company: ''
          }
        },
        yyChart: null, //油烟数据异常
        yyOption: {
          title: {
            text: '排放浓度(mg/m3)',
            'textStyle': {
              'fontSize': 14
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '当前峰值mg/m³',
              type: 'line',
              data: []
            },
            {
              name: '当前均值mg/m³',
              type: 'line',
              data: []
            }

          ]
        },
        klwChart: null, //油烟数据异常
        klwOption: {
          title: {
            text: '排放浓度(mg/m3)',
            'textStyle': {
              'fontSize': 14
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            'textStyle': {
              'fontSize': 12
            },
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]

          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '当前峰值mg/m³',
              type: 'line',
              data: []
            },
            {
              name: '当前均值mg/m³',
              type: 'line',
              data: []
            }

          ]
        },
        nmhcChart: null, //油烟数据异常
        nmhcOption: {
          title: {
            text: '排放浓度(mg/m3)',
            'textStyle': {
              'fontSize': 14
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '当前峰值mg/m³',
              type: 'line',
              data: []
            },
            {
              name: '当前均值mg/m³',
              type: 'line',
              data: []
            }

          ]
        }
        // yyList: [], //油烟
        // klwList: [], //颗粒物
        // nmhcList: []//非甲

      }
    },
    watch: {
      // 搜索条件体
      listQuery: {
        handler: function(val, oldVal) {
        },
        deep: true
      }
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    created() {
      _self = this
      this.listQuery.item.userId = this.token
      this.getAllDeviceList()
      this.getYCDY()
    },
    mounted() {
      this.initECharts()
      this.$nextTick(() => {
        // this.baiduMap()
      })
    },

    methods: {
      searchList() {
        this.getAllDeviceList()
      },
      getYCDY() {
        var start = Math.floor(Math.random() * (223 - 218)) + 218
        var end = Math.floor(Math.random() * (99 - 0)) + 0
        if (end === 0) {
          return start
        } else if (end < 10) {
          return start + '.' + end + '0'
        } else {
          return start + '.' + end
        }
      },
      initECharts() {
        this.yyChart = echarts.init(document.getElementById('yyCharts'))
        this.klwChart = echarts.init(document.getElementById('klwCharts'))
        this.nmhcChart = echarts.init(document.getElementById('nmhcCharts'))
      },
      infoWindowClose() {
        this.show = false
      },
      // infoWindowOpen(e) {
      //   console.log('e :>> ', e)
      //   this.show = true
      // },
      handler(e) {
        // console.log(BMap, map)
        this.BMap = e.BMap
        this.center.lng = 116.404
        this.center.lat = 39.915
        this.zoom = 10
      },
      //添加地图红点的点击事件
      clickHandler(e) {
        console.log('e :>> ', e)

        for (let i = 0; i < _self.mList.length; i++) {
          const mItem = _self.mList[i]
          console.log('mItem.longitude :>> ', mItem.longitude)
          if (mItem.longitude.indexOf(e.position.lng + ',' + e.position.lat) > -1) {
            console.log('123123123 :>> ', 123123123)
            _self.isShowDetailsDialog = true
            // _self.show = true
            _self.onItemClick(mItem)
          }
        }

        // if (this.BMap) {
        //   const geoCoder = new this.BMap.Geocoder()
        //   geoCoder.getPoint(e.point, function(res) {
        //     console.log('1231231res :>> ', res)
        //   })
        //   geoCoder.getLocation(e.point, function(res) {
        //     console.log('1231231res :>> ', res)
        //   })
        //   // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`)
        //   console.log(e.target.lng + ',' + e.target.lat)
        //   console.log(_self.mList[4].longitude)
        //   // console.log('e.poinit :>> ', e.point.lng + ',' + e.point.lat)
        //   for (let i = 0; i < _self.mList.length; i++) {
        //     const mItem = _self.mList[i]
        //     console.log('mItem.longitude :>> ', mItem.longitude)
        //     if (mItem.longitude.indexOf(e.target.Av.lng + ',' + e.target.Av.lat) > -1) {
        //       console.log('123123123 :>> ', 123123123)
        //       _self.isShowDetailsDialog = true
        //       _self.show = true
        //       _self.onItemClick(mItem)
        //     }
        //   }
        // }
      },

      getAllDeviceList() {
        var points = []
        getList(_self.listQuery.item.userId, _self.listQuery.item.company, _self.listQuery.page.num, _self.listQuery.page.size).then(res => {
          console.log('123:', res)
          _self.listQuery.page.total = res.totalData
          _self.mList = res.data
          for (let i = 0; i < _self.mList.length; i++) {
            const mItem = _self.mList[i]
            if (mItem.longitude !== '') {
              var str = mItem.longitude.split(',')
              const position = { lng: str[0] * 1, lat: str[1] * 1 }
              var mPosition = { position: position, company: mItem.company }
              points.push(mPosition)
            }
          }
          // const points = []
          // for (var i = 0; i < 1000; i++) {
          //   const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 }
          //   points.push(position)
          // }
          this.points = points

          console.log('points: :>> ', _self.points)
          if (_self.mList.length > 0) {
            _self.selectItem = _self.mList[0]
            _self.getDeviceDetails(_self.selectItem.deviceMac)
            _self.getDeviceDataTb(_self.selectItem.deviceMac)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      openSearchList() {
        this.isOpen = !this.isOpen
        console.log(this.isOpen)
      },
      //服务商列表点击事件
      onItemClick(item) {
        console.log('选择设备：', item)
        _self.selectItem = item
        _self.getDeviceDetails(item.deviceMac)
        _self.getDeviceDataTb(item.deviceMac)
      },
      getDeviceDetails(deviceMac) {
        getDetailsByDeviceMac(deviceMac).then(res => {
          const resList = res.data
          this.deviceName = res.deviceName
          console.log('res :>> ', res)
          _self.dcList = []
          _self.deviceInfo = {}
          for (let i = 0; i < resList.length; i++) {
            const element = resList[i]
            if (element.data1.indexOf('Unit') === -1) {
              var newItem = element
              newItem.dcdy = _self.getYCDY()
              _self.deviceInfo = newItem
            } else {
              _self.dcList.push(element)
            }
          }
          _self.isShowDetailsDialog = true

          console.log('deviceInfo:', _self.deviceInfo)

          console.log('dcList', _self.dcList)
        }).catch(err => {
          console.log(err)
        })
      },

      getDeviceDataTb(deviceMac) {
        var _that = this
        getDeviceDataMA(deviceMac).then(res => {
          const resList = res.data
          var yypjzList = []
          var yyzdzList = []
          var klwpjzList = []
          var klwzdzList = []
          var nmhcpjzList = []
          var nmhczdzList = []
          for (let i = 0; i < resList.length; i++) {
            const element = resList[i]
            yypjzList.push(parseFloat(element.dataYYA).toFixed(2))// element.dataYYA //油烟均值
            yyzdzList.push(element.dataYYM) // element.datadataYYM //油烟最大值
            klwpjzList.push(parseFloat(element.dataKLWA).toFixed(2))// element.dataKLWA  //颗粒物平均值
            klwzdzList.push(element.dataKLWM) // element.dataKLWM  //颗粒物最大值
            nmhcpjzList.push(parseFloat(element.dataFJWZJA).toFixed(2))// element.dataFJWZJA  //nmhc平均值
            nmhczdzList.push(element.dataFJWZJM)// element.dataFJWZJM  //nmhc最大值
          }
          _that.yyOption.series[0].data = yyzdzList
          _that.yyOption.series[1].data = yypjzList
          _that.yyChart.setOption(_that.yyOption)
          _that.klwOption.series[0].data = klwzdzList
          _that.klwOption.series[1].data = klwpjzList
          _that.klwChart.setOption(_that.klwOption)
          _that.nmhcOption.series[0].data = nmhczdzList
          _that.nmhcOption.series[1].data = nmhcpjzList
          _that.nmhcChart.setOption(_that.nmhcOption)
          console.log('resList :>> ', resList)
        }).catch(err => {
          console.log(err)
        })
      },

      closeDetailsDialog() {
        _self.isShowDetailsDialog = !_self.isShowDetailsDialog
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      // 改变每页显示条数
      handleSizeChange(val) {
        this.listQuery.page.size = val
        this.getAllDeviceList()
      },
      // 改变当前页面
      handleCurrentChange(val) {
        this.listQuery.page.num = val
        this.getAllDeviceList()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #MapBox {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /* 地图 */
  .baiduMap {
    height: 1000px;
    width: 100%;
  }

  /* 去除地图上，左下字体标注 */
  .anchorBL {
    display: none;
  }

  .search-box {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    padding-top: 10px;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
  }

  .search {
    border: solid 1px #ddd;
    padding: 5px;
  }

  .search-list-box {
    position: absolute;
    top: 50px;
    left: 0;
    height: 440px;
    width: 280px;
    padding: 10px;
    z-index: 10;
    background: #ffffff;
    /* background: #f4f4f4; */

  }

  .details {
    float: right;
    background-color: #FFFFFF;
    right: 0;
    top: 0;
    width: 640px;
    height: 450px;
    position: absolute;
  }

  .details-header {
    height: 80px;
    background-color: #2d97e7;
  }

  .label-box {
    display: block;
    color: #FFFFFF;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    align-items: center;
  }

  .details-device-info {
    background-color: #ffffff;
    height: 100px;
    padding-top: 10px;
  }
  .details-device-info2 {
    background-color: #ffffff;
    height: 130px;
    padding-top: 10px;
  }

  .label-box-font {
    font-size: 14px;
    color: #303133;
  }

  .border-box {
    padding: 5px;
    display: block;
  }

  .marage-left-5 {
    padding-left: 5px;
  }

  .marage-left-10{
    padding-left: 10px;
  }
  
  .marage-top-5{
    padding-top: 2px;
  }

  .r-info {
    overflow: hidden;
    background-color: #fff;
    padding: 10px;

    &-mod {
      width: 50%;
      float: left;
    }
  }

  .div-hint {
    display: inline-flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
  }

  .font-size-14 {
    font-size: 14px;
  }

  .mdiv-box {
    width: 100%;
    padding-left: 15px;
    padding-right: 20px;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .margin-left-10 {
    margin-left: 10px;
  }

  .map-bar {
    padding: 5px;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid #eeeeee;
    height: 36px;
    line-height: 36px;
    position: relative;
    padding-left: 30px;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;

    >i {
      position: absolute;
      left: 5px;
      top: 14px;
    }
  }
</style>